<template>
  <div v-if="Object.keys(detailinfo).length !==0" class="detailinfo">
     <div class="cellall">
       <div class="cellstop"></div>
       <div class="cellscenter"><span>{{detailinfo.detailImage[0].desc}}</span></div>
       <div class="cellsbottom">
         <div>{{detailinfo.detailImage[0].key}}</div>
         <div class="cellsbottom1"></div>
       </div>
     </div>
     <div class="allimg">
       <img v-for="(item,index)  in detailinfo.detailImage[0].list"
        :key="index+item" :src="item"
        @load='imgload'
        >
   
     </div>
  </div>
</template>

<script>
export default {
  props:{
    detailinfo:{
      type:Object,
      defualt(){
        return {}
      }
    }
  },
  name:'childendetailinfo',
  data(){
   return{
    currtlength:0,
    currtindex:0
   }
  },
  methods:{
    imgload(){
      if(++this.currtindex==this.currtlength){
        this.$emit('imgload')
      }
    }
  },
  watch: {
    detailinfo(){
      this.currtlength=this.detailinfo.detailImage[0].list.length
    }
  }
}
</script>

<style scoped>
 .detailinfo{
   margin-top:20px;
   padding-bottom: 20px;
  box-shadow: 0px 3px 1px 0px  rgba(192,192,192,0.5);
 }
 .cellstop{
   width: 150px;
   height: 1px;
   border-bottom: 3px solid rgb(192,192,192);
   margin-bottom:15px;
 }
 .cellstop::before{
   display: inline-block;
   content:'';
   width: 8px;
   height: 8px;
   background-color: black;
   position: relative;
   top: -10px;
   
 }
 .cellall{
   margin:15px;
 }
 .cellsbottom{
    margin:50px 0;
    display: flex;
    justify-content: space-between;
 }
 .cellsbottom1{
   width: 150px;
   height: 1px;
   border-bottom:3px solid rgb(192,192,192);
   margin-top:10px;
 }
 .cellsbottom1::after{
    display: inline-block;
   content:'';
   width: 8px;
   height: 8px;
   background-color: black;
   position: relative;
   top: -10px;
   left: 150px;
 }
 .allimg img{
   width: 100vw;
 }
 
</style>